<template>
  <el-dialog
    :title="dataForm.stateExplain"
    :visible.sync="detailDialogData.visible"
    :close-on-click-modal="false"
    width="80%"
    top="8vh"
  >
    <el-row>
      <el-form :model="dataForm" ref="dataForm" label-width="130px">
        <div class="cjrwBg">
          <el-row>
            <el-col :span="24">
              <el-col :span="8">
                <el-form-item label="发起名称" prop="faqiName">
                  <el-input
                    disabled
                    v-model="dataForm.faqiName"
                    placeholder="发起名称"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="任务有效期" required>
                  <el-col :span="11">
                    <el-date-picker
                      v-model="dataForm.rwYxqq"
                      type="date"
                      disabled
                      value-format="yyyy-MM-dd"
                      prop="rwYxqq"
                      placeholder="开始日期"
                      style="width: 100%"
                    ></el-date-picker>
                  </el-col>
                  <el-col :span="2">
                    <div class="text-center">至</div>
                  </el-col>
                  <el-col :span="11">
                    <el-date-picker
                      disabled
                      v-model="dataForm.rwYxqz"
                      type="date"
                      value-format="yyyy-MM-dd"
                      prop="rwYxqz"
                      placeholder="结束日期"
                      style="width: 100%"
                    ></el-date-picker>
                  </el-col>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="8">
                <el-form-item label="填报结束日期" prop="signDate">
                  <el-date-picker
                    v-model="dataForm.signDate"
                    disabled
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="填报结束日期"
                    style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="dataForm.userLxDsc != '部门自拟'">
                <el-form-item label="模板名称" prop="templateId">
                  <el-input v-model="dataForm.templateName" disabled style="width:108%"></el-input>
                  <!-- <el-select
                    v-model="dataForm.templateId"
                    disabled
                    placeholder="模板名称"
                    class="xiaLa"
                    style="width: 107%"
                    :clearable="true"
                  >
                    <el-option
                      v-for="(item, index) in categoryList"
                      :key="index"
                      :label="item.templateName"
                      :value="item.id"
                    ></el-option>
                  </el-select> -->
                </el-form-item>
              </el-col>
            </el-col>
            <el-col>
              <el-col :span="24">
                <el-button
                  type="text"
                  style="margin-left: 30px"
                  icon="el-icon-user-solid"
                ></el-button>
                被考核人：{{ dataForm.ryName }}
              </el-col>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table
          style="width: 100%; margin-top: 20px"
          :data="dataList"
          border
          v-loading="loading"
        >
          <el-table-column
            type="index"
            width="80"
            header-align="center"
            align="center"
            label="序号"
          ></el-table-column>
          <el-table-column
              prop="batchNumber"
              width="60"
              header-align="center"
              align="center"
              label="批次"
          ></el-table-column>
          <el-table-column
            prop="renwuName"
            header-align="center"
            align="center"
            label="任务名称"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="难度系数"
            header-align="center"
            align="center"
          >
            <el-table-column
              prop="zycd"
              header-align="center"
              align="center"
              label="重要程度"
            >
              <template slot="header" slot-scope="scope">
                <span style="margin-right: 15px;">重要程度</span>
                <el-tooltip class="item" effect="dark" placement="top-start">
                  <div slot="content">说明：<br/>
                                      1. 重要程度高，是指重点任务对集团层面有重要影响；<br/>
                                      2. 重要程度较高，是指重点任务对公司层面有重要影响；<br/>
                                      3. 重要程度一般，是指重点任务对部门层面有重要影响；<br/>
                  </div>
                  <i class="el-icon-info" style="color:#3e51a3"></i>
                </el-tooltip>
              </template>
              <template slot-scope="scope">
                <div v-for="(item,index) in chengduList"><span v-if="scope.row.zycd == item.id">{{item.type}}</span></div>
              </template>
            </el-table-column>
            <el-table-column
              prop="wcnd"
              header-align="center"
              align="center"
              label="完成难度"
            >
              <template slot="header" slot-scope="scope">
                <span style="margin-right: 15px;">完成难度</span>
                <el-tooltip class="item" effect="dark" placement="top-start">
                  <div slot="content">说明：<br/>
                                      1. 完成难度高，是指重点任务创新性强、协调难度大；<br/>
                                      2. 完成难度较高，是指重点任务有一定创新性、需要争取政策支持；<br/>
                                      3. 完成难度一般，是指重点任务有一定难度，但有专业团队支持，本部门能够独立承担工作；<br/>
                  </div>
                  <i class="el-icon-info" style="color:#3e51a3"></i>
                </el-tooltip>
              </template>
              <template slot-scope="scope">
                <div v-for="(item,index) in chengduList"><span v-if="scope.row.wcnd == item.id">{{item.type}}</span></div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            label="任务有效期"
            min-width="400"
          >
            <el-table-column
              prop="rwYxqq"
              align="center"
              value-format="yyyy-MM-dd"
              label="开始时间"
              width="200"
            >
            </el-table-column>
            <el-table-column
              prop="rwYxqz"
              align="center"
              value-format="yyyy-MM-dd"
              label="结束时间"
              width="200"
            >
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop="weightset"
            header-align="center"
            align="center"
            label="权重"
          >
          </el-table-column>
          <el-table-column
            prop="workTarget"
            header-align="center"
            align="center"
            label="工作目标/成效"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="auditStatusDsc"
            header-align="center"
            align="center"
            width="120"
            label="状态"
          >
          </el-table-column>

        </el-table>
      </el-col>
    </el-row>
    <!--  选择人员信息-->
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" plain @click="backBtn">关闭</el-button>
    </span>
  </el-dialog>
</template>
<script>
import {getDetailListdepid, getDetailListByZdrwNdId} from '@/api/hetongrenwu/zhongdian/renwuchuangjian'
import {getList} from '@/api/hetongrenwu/zhongdian/renyuanfenzu'
export default {
  props: {
    detailDialogData: {},
  },
  data() {
    return {
      dataList: [],
      dataForm: {},
      chengduList:[],
      id: "",
      loading: false,
    };
  },
  watch: {
    detailDialogData: {
      handler(newVal, oldVal) {
        if (newVal.visible) {
          this.dataForm = newVal.rows;
          if(newVal.type =='wbhz'){
            this.fngetDetailListWbhz(newVal.rows.recordId);
          }else{
            this.fngetDetailListRwsh(newVal.rows.id);
          }
          this.getxList()
        }
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
  },
  methods: {
    getxList(){
      getList().then(res=>{
        this.chengduList = res.data.data;
      })
    },
    backBtn() {
      this.dataList = [];
      this.shouyuerendataList = [];
      this.dataForm = {};
      this.detailDialogData.visible = false;
      this.$emit("detailDialogChildren","返回")
    },
    fngetDetailListRwsh(id) {
      this.loading = true;
      getDetailListByZdrwNdId({ id:id }).then((response) => {
        this.dataList = response.data.data;
        this.loading = false;
      });
    },
    fngetDetailListWbhz(recordId) {
      this.loading = true;
      getDetailListdepid({ id:recordId }).then((response) => {
        this.dataList = response.data.data;
        this.loading = false;
      });
    },
  },
};
</script>
<style scoped>
.cjrwBg {
  border-radius: 16px;
  -webkit-box-shadow: 5px 5px 10px #e3e3ea, -5px -5px 10px #ffffff;
  box-shadow: 5px 5px 10px #e3e3ea, -5px -5px 10px #ffffff;
  background: #fbfbfd;
  padding: 10px 30px 30px 30px;
}
</style>
